<template>
  <el-dropdown
    class="tagList-dropdown fulled-w"
    trigger="click"
    placement="bottom-start"
    @visible-change="onVisibleChange"
  >
    <div class="dropdown-toggle d-flex jc-between al-center bgc-white">
      <div class="d-flex">
        <div v-for="(item, i) in tagList" :key="i" class="tag-item d-flex al-center px-8 t-theme fs-xs bd-filt">
          <div class="flex-1 t-ellipsis">{{ item }}</div>
          <i class="el-icon-error ml-8" @click.stop="onSelectTag(item)"></i>
        </div>
      </div>
      <i class="el-icon-arrow-down" :class="dropdownIn ? 'dropdown-in' : 't-light'"></i>
    </div>
    <el-dropdown-menu slot="dropdown" class="tagList-dropdown-menu">
      <div v-for="(item, index) in tagData" :key="index" :class="{ floor: index < tagData.length - 1 }">
        <div class="title py-16">{{ item.title }}</div>
        <div class="list d-flex flex-wrap t-light">
          <div
            v-for="(tag, i) in item.list"
            :key="i"
            class="item mr-16 mb-16 pointer"
            :class="{ 't-theme': isSelectedTag(tag) }"
            @click="onSelectTag(tag)"
          >
            {{ tag }}
          </div>
        </div>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  import { FUND_UP_DOWN_TYPE } from '@/constants';

  export default {
    model: { prop: 'tagList' },

    props: {
      tagList: {
        type: Array,
        default: () => []
      },
      maxlength: {
        type: Number,
        default: 3
      }
    },

    data() {
      // 基金标签列表
      this.tagData = [
        { title: '申购费率', list: ['费率一折', '买入0费率'] },
        { title: '风险类型', list: ['低风险', '中低风险', '中风险', '中高风险', '高风险'] },
        { title: '基金规模', list: ['≤2亿万', '2~10亿万', '10~50亿万', '50~100亿万', '＞100亿万'] },
        {
          title: '建议年限',
          list: ['建议持有1年以上', '建议持有2年以上', '建议持有3年以上', '建议持有5年以上']
        },
        {
          title: '排名推荐',
          list: ['同类排名top1', '同类排名top2', '同类排名前三', '同类排名前五', '同类排名前十']
        },
        {
          title: '个性标签',
          list: [
            '智能选基',
            '政策支持',
            '场外唯一',
            '金牛指数天团',
            '量化策略',
            '成长可期',
            '力争超额收益',
            '穿越牛熊',
            '王牌新秀',
            '低波动率',
            '低回撤率',
            '聚焦先锋',
            '年年正收益',
            '净值快速修复',
            '十年绩优老基',
            '能涨抗跌'
          ]
        }
      ];
      return {
        FUND_UP_DOWN_TYPE,
        dropdownIn: false
      };
    },

    methods: {
      // 是否为已选择标签
      isSelectedTag(tag) {
        return this.tagList.find((item) => item === tag);
      },

      // 选择标签
      onSelectTag(tag) {
        // 取消选中
        let index;
        const hasTag = this.tagList.find((item, i) => {
          const temp = item === tag;
          if (temp) index = i;
          return temp;
        });
        if (hasTag) {
          this.tagList.splice(index, 1);
          return;
        }
        if (this.tagList.length === this.maxlength) {
          this.tagList.pop();
        }
        this.tagList.push(tag);
      },

      // 标签选择下拉菜单 显示/隐藏
      onVisibleChange(visible) {
        this.dropdownIn = visible;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tagList-dropdown {
    .dropdown-toggle {
      border: 1px solid #cecece;
      border-radius: 4px;
      padding: 16px 7px 16px 16px;
      min-height: 62px;
      cursor: pointer;

      .tag-item {
        border: 1px solid map-get($bdColors, 'theme');
        max-width: 94px;
        height: 28px;
        line-height: 26px;
        background-color: #f4f9ff;

        &:not(:last-of-type) {
          margin-right: 12px;
        }
      }

      .el-icon-arrow-down {
        border-radius: 50%;
        padding: 2px;
        transition: all 0.3s;

        &.dropdown-in {
          transform: rotate(180deg);
        }
      }
    }
  }

  .tagList-dropdown-menu {
    margin: 5px 0;
    padding: 0 24px 8px;
    width: 360px;

    .floor:not(:last-of-type) {
      border-bottom: 1px solid map-get($bdColors, 'grey');
    }

    ::v-deep {
      .popper__arrow {
        display: none;
      }
    }
  }
</style>
